<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习5 使用 jQuery 制作游戏角色</title>
    <style>
        /* CSS样式定义 */
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            overflow: hidden;
        }

        #map {
            width: 100vw;
            height: 100vh;
            position: relative;
            cursor: pointer;
        }

        #character {
            width: 80px;
            height: 80px;
            background-image: url('img/player_right.gif');
            background-size: cover;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div id="map">
        <div id="character"></div>
    </div>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function () {
            // 获取角色和地图的jQuery对象
            var character = $('#character');
            var map = $('#map');

            // 禁止鼠标右键菜单
            map.on('contextmenu', function (e) {
                e.preventDefault();
            });

            // 点击地图时触发的事件
            map.on('click', function (e) {
                character.stop(); // 停止之前的动画

                // 获取地图的偏移量和点击位置
                var mapOffset = map.offset();
                var clickX = e.pageX - mapOffset.left;
                var clickY = e.pageY - mapOffset.top;

                // 获取当前角色的位置和目标位置
                var currentX = parseInt(character.css('left'));
                var targetX = clickX - character.width() / 2;

                // 判断目标位置与当前位置，决定使用哪张图片
                if (targetX < currentX) {
                    character.css('background-image', 'url("img/player_left.gif")');
                } else {
                    character.css('background-image', 'url("img/player_right.gif")');
                }

                // 角色移动动画
                character.animate({ top: clickY - character.height() / 2, left: clickX - character.width() / 2 }, 2500);
            });

            // 双击地图时触发的事件
            map.on('dblclick', function (e) {
                character.stop(); // 停止之前的动画

                // 获取地图的偏移量和点击位置
                var mapOffset = map.offset();
                var clickX = e.pageX - mapOffset.left;
                var clickY = e.pageY - mapOffset.top;

                // 获取当前角色的位置和目标位置
                var currentX = parseInt(character.css('left'));
                var targetX = clickX - character.width() / 2;

                // 判断目标位置与当前位置，决定使用哪张大招图片
                if (targetX < currentX) {
                    character.css('background-image', 'url("img/playerbig_left.gif")');
                } else {
                    character.css('background-image', 'url("img/playerbig_left.gif")');
                }
                // 角色移动动画和大招动画
                character.animate({ top: clickY - character.height() / 2, left: clickX - character.width() / 2 }, 1500, function () {
                    // 动画完成后恢复到原始方向图片
                    if (targetX < currentX) {
                        character.css
                            ('background-image', 'url("img/player_left.gif")');
                    } else {
                        character.css('background-image', 'url("img/player_right.gif")');
                    }
                });
            });
        });
    </script>

</body>

</html>